<template>
  <div class="xhhzcx_box">
    <header-comm></header-comm>
    <!-- 表格 -->
    <div class="bcg left_bcg">
      <div class="hedlist">
        <div class="head_box">
          <!-- <div class="sele" >
                        <a-auto-complete v-model="htdh" :data-source="htdData"  class="global-search"    style="width: 170px"  @search="onhtdhSearch" @select="onhtdSelect" size="large" >
                        <template slot="htdData">
                            <a-select-option v-for="(htd,i) in htdData" :key="i" >
                                {{htd}}
                            </a-select-option>
                        </template>
                        <a-input>
                            <a-button
                            slot="suffix"
                            style="margin-right: -12px"
                            class="search-btn"
                            size="large"
                            >
                            <a-icon type="search" />
                            </a-button>
                        </a-input>
                        </a-auto-complete>
          </div>-->
          <div class="sele">
            <a-auto-complete
              v-model="xl"
              :data-source="XlData"
              class="global-search sele_input"
              placeholder="型号规格"
              allowClear
              @search="onXLSearch"
              @select="onXLSelect"
              size="large"
            >
              <template slot="XlData">
                <a-select-option v-for="(xl,i) in XlData" :key="i">{{xl}}</a-select-option>
              </template>
              <a-input>
                <a-button slot="suffix" style="margin-right: -12px" class="search-btn" size="large">
                  <a-icon type="search" />
                </a-button>
              </a-input>
            </a-auto-complete>
          </div>
          <!-- <div class="sele">
                        <span>商品名称：</span>
                        <a-auto-complete v-model="xlqz" :data-source="spmcData"  class="global-search"    style="width: 170px"  @search="onSpmcSearch" @select="onSpmcSelect" size="large" >
                        <template slot="spmcData">
                            <a-select-option v-for="(spmc,i) in spmcData" :key="i" >
                                {{spmc}}
                            </a-select-option>
                        </template>
                        <a-input>
                            <a-button
                            slot="suffix"
                            style="margin-right: -12px"
                            class="search-btn"
                            size="large"
                            >
                            <a-icon type="search" />
                            </a-button>
                        </a-input>
                        </a-auto-complete>
          </div>-->
          <!-- <div class="sele">
                        <span>品牌：</span>
                        <a-auto-complete v-model="sccjc" :data-source="sccjcData"  class="global-search"    style="width: 170px"  @search="onSccjcSearch" @select="onSccjcSelect" size="large" >
                        <template slot="sccjcData">
                            <a-select-option v-for="(sccjc,i) in sccjcData" :key="i" >
                                {{sccjc}}
                            </a-select-option>
                        </template>
                        <a-input>
                            <a-button
                            slot="suffix"
                            style="margin-right: -12px"
                            class="search-btn"
                            size="large"
                            >
                            <a-icon type="search" />
                            </a-button>
                        </a-input>
                        </a-auto-complete>
          </div>-->
          <div class="sele">
            <!-- <a-input  style="width: 170px" v-model="dwmc"  @change="onmcdwSearch" />
            <a-icon type="search" class="search" />-->
            <a-auto-complete
              v-model="dwmc"
              :data-source="dwmcData"
              class="global-search sele_input"
              placeholder="客户名称"
              @search="onDwmcSearch"
              @select="onDwmcSelect"
              size="large"
              allowClear
            >
              <template slot="dwmcData">
                <a-select-option v-for="(dwmc,i) in dwmcData" :key="i">{{dwmc}}</a-select-option>
              </template>
              <a-input>
                <a-button slot="suffix" style="margin-right: -12px" class="search-btn" size="large">
                  <a-icon type="search" />
                </a-button>
              </a-input>
            </a-auto-complete>
          </div>
          <!-- <div class="sele">
                        <span>制单人：</span>
                        <a-select v-model="zdr_val" @change="handlezdrChange"   style="width:170px" >
                            <a-select-option :value="zd" v-for="(zd,i) in zdrdata" :key="i"  >
                                {{zd}}
                            </a-select-option>
                        </a-select>
          </div>-->
          <!-- <div class="sele">
                        <span>选择开始日期：</span>
                        <a-date-picker format="YYYY-MM-DD "   style="width:150px" @change="onstartTimeChange" >
                            <template slot="renderExtraFooter">
                                extra footer
                            </template>
                        </a-date-picker>
          </div>-->
          <!-- <div class="sele">
                        <span>选择结束日期：</span>
                        <a-date-picker show-time format="YYYY-MM-DD " :defaultValue="moment(enddate, 'YYYY-MM-DD')"  style="width:150px" @change="onendTimeChange" >
                            <template slot="renderExtraFooter">
                                extra footer
                            </template>
                        </a-date-picker>
          </div>-->
          <div class="rqsele">
            <span>选择日期：</span>
            <a-range-picker :format="dateFormat" @change="onTimeChange" class="rq_input" />
          </div>
          <div class="sele">
            <span>归属公司：</span>
            <a-input class="sele_input" v-model="gsbm" disabled />
          </div>
        </div>
      </div>
      <div class="xhhzcx_table">
        <a-table
          @change="handleChangelist"
          :loading="loading"
          :columns="columns"
          :pagination="pagination"
          :dataSource="data"
          :scroll="{ x: 2000}"
          :rowKey="(record,index)=>{return index}"
        >
          <div
            slot="filterHtdhDropdown"
            slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
            class="dropdown_all"
          >
            <a-input
              v-ant-ref="c => (searchInput = c)"
              placeholder="搜索合同单号"
              v-model="htdh"
              class="dropdown_input"
              @change="onhtdhSearch"
              @pressEnter="onhtdhSearch"
              allowClear
            />

            <a-button size="small" class="dropdown_btn" @click="onhtdhClear">清空</a-button>
            <a-button
              type="primary"
              icon="search"
              size="small"
              class="dropdown_btn dropdown_btn1"
              @click="onhtdhSearch"
            >搜索</a-button>
          </div>
          <a-icon
            slot="filterIcon"
            slot-scope="filtered"
            type="search"
            :style="{ color: filtered ? '#108ee9' : undefined }"
          />
          <!-- 商品名称搜索 -->
          <div
            slot="filterSpmcDropdown"
            slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
            class="dropdown_all"
          >
            <a-input
              v-ant-ref="c => (searchInput = c)"
              placeholder="搜索商品名称"
              v-model="xlqz"
              class="dropdown_input"
              @change="onSpmcSearch"
              @pressEnter="onSpmcSearch"
              allowClear
            />

            <a-button size="small" class="dropdown_btn" @click="onSpmcClear">清空</a-button>
            <a-button
              type="primary"
              icon="search"
              size="small"
              class="dropdown_btn dropdown_btn1"
              @click="onSpmcSearch"
            >搜索</a-button>
          </div>
          <a-icon
            slot="filterIcon"
            slot-scope="filtered"
            type="search"
            :style="{ color: filtered ? '#108ee9' : undefined }"
          />
          <!-- 品牌搜索 -->
          <div
            class="dropdown_all"
            slot="filterSccjcDropdown"
            slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
          >
            <a-input
              v-ant-ref="c => (searchInput = c)"
              placeholder="搜索品牌"
              v-model="sccjc"
              class="dropdown_input"
              @change="onSccjcSearch"
              @pressEnter="onSccjcSearch"
              allowClear
            />

            <a-button size="small" class="dropdown_btn" @click="onSccjcClear">清空</a-button>
            <a-button
              type="primary"
              icon="search"
              size="small"
              class="dropdown_btn dropdown_btn1"
              @click="onSccjcSearch"
            >搜索</a-button>
          </div>
          <a-icon
            slot="filterIcon"
            slot-scope="filtered"
            type="search"
            :style="{ color: filtered ? '#108ee9' : undefined }"
          />
          <template slot="xlqz" slot-scope="text, record,">
            <div class="spmc_yc yc">
              <a-tooltip placement="topLeft" :title="record.xlqz">{{record.xlqz}}</a-tooltip>
            </div>
          </template>
          <template slot="djbh" slot-scope="text, record,">
            <div class="ymInfo_yc yc">
              <a-tooltip placement="topLeft" :title="record.djbh">{{record.djbh}}</a-tooltip>
            </div>
          </template>
          <template slot="xl" slot-scope="text, record,">
            <div class="xl_yc yc">
              <a-tooltip placement="topLeft" :title="record.xl">{{record.xl}}</a-tooltip>
            </div>
          </template>
          <template slot="htsl" slot-scope="text, record,">
            <div>
              <span class="sl_style">{{record.htsl}}</span>
            </div>
          </template>
          <template slot="paijia" slot-scope="text, record,">
            <div>
              <span class="jg_style">{{record.paijia}}</span>
            </div>
          </template>
          <template slot="HSJ" slot-scope="text, record,">
            <div>
              <span class="jg_style">{{record.HSJ}}</span>
            </div>
          </template>
          <template slot="ZKL" slot-scope="text, record,">
            <div>
              <span class="jg_style">{{record.ZKL}}</span>
            </div>
          </template>
          <template slot="WBJ" slot-scope="text, record,">
            <div>
              <span class="jg_style">{{record.WBJ}}</span>
            </div>
          </template>
        </a-table>
      </div>
    </div>
    <rightnav></rightnav>
  </div>
</template>

<script>
import qs from "qs";
import headerComm from "../../header-comm/header";
import moment from "moment";
import rightnav from "../rightnav.vue";

// 引入表格的列
const columns = [
  {
    title: "商品名称",
    dataIndex: "xlqz",
    className: "XLQZ_colme",
    fixed: "left",
    scopedSlots: {
      customRender: "xlqz",
      filterDropdown: "filterSpmcDropdown",
      filterIcon: "filterIcon"
    }
  },
  {
    title: "合同单号",
    dataIndex: "djbh",
    className: "ymInfo_colme",
    fixed: "left",
    scopedSlots: {
      customRender: "djbh",
      filterDropdown: "filterHtdhDropdown",
      filterIcon: "filterIcon"
    }
  },
  {
    title: "型号规格",
    dataIndex: "xl",
    fixed: "left",
    className: "xl_colme",
    scopedSlots: { customRender: "xl" }
  },
  {
    title: "品牌",
    dataIndex: "sccjc",
    scopedSlots: {
      filterDropdown: "filterSccjcDropdown",
      filterIcon: "filterIcon"
    }
  },
  {
    title: "客户名称",
    dataIndex: "dwmc"
  },

  {
    title: "任务人",
    dataIndex: "rwr",
    filterMultiple: false,
    filters: []
  },
  {
    title: "制单人",
    dataIndex: "zdr"
  },
  {
    title: "合同数量",
    dataIndex: "htsl",
    scopedSlots: {
      customRender: "htsl"
    }
  },
  {
    title: "销售价",
    dataIndex: "hsj"
  },
  {
    title: "发票类型",
    dataIndex: "fplx"
  },
  {
    title: "要求发货日期",
    dataIndex: "computed"
  },
  {
    title: "制单日期",
    dataIndex: "dh"
  }
];

export default {
  data() {
    return {
      dateFormat: "YYYY/MM/DD",
      moment,
      // 表格数据
      data: null,
      columns,
      loading: true,
      //数据库名称
      database: "ERP2_BEARING",
      // ip地址
      ip: "122.112.240.180",
      ceqybm: "7401",
      gsdata: [],
      // 制单人数据
      zdrdata: [],
      pagination: {
        defaultPageSize: 10,
        current: 1,
        showTotal: total => `共 ${total} 条数据`,
        total: 0
      },
      // 合同单号
      htdh: "",
      // 合同号筛选数组
      htdData: [],

      // 型号
      xl: "",
      // 型号数据数组
      XlData: [],
      // 品牌
      sccjc: "",
      // 品牌筛选数组
      sccjcData: [],
      // 单位名称
      dwmc: "",
      // 单位名称筛选数组
      dwmcData: [],
      // 库房名称
      kfmc: "",
      // 商品名称
      xlqz: "",
      // 商品名称筛选数组
      spmcData: [],
      // 制单人
      zdr: "",
      // 开始日期
      startdate: "",
      // 结束日期
      enddate: new Date(),
      // 公司编码
      gsbm: "",
      // 制单人默认数据
      zdr_val: "",
      gsbm_val: "",
      // 总条数
      totalNum: 0,
      // 控制页脚隐藏
      isShow: true,
      // 价格权限
      jgqx: "",
      rwrarrall: []
    };
  },
  components: {
    headerComm,
    rightnav
  },
  methods: {
    // 日期触发
    // 结束日期触发
    onTimeChange(date, dateString) {
      this.startdate = dateString[0].split("/").join("-");
      this.enddate = dateString[1].split("/").join("-");
      this.handleChangelist(this.pagination);
    },

    // 合同单搜索触发
    onhtdhClear(e) {
      this.htdh = "";
      this.pagination.current = 1;
      this.onSearch();
    },
    onhtdhSearch(e) {
      // this.htdh=e.target.value;
      // this.onSearch();
      //   this.htdh = e.target.value;
      //   if (this.timer) {
      //     clearTimeout(this.timer);
      //   }
      //   this.timer = setTimeout(() => {
      //     // console.log("防抖...");
      //     this.pagination.current = 1;
      //     this.onSearch();
      //     this.timer = undefined;
      //   }, 200);
      this.onSearch();
    },
    // 型号搜索触发
    onXLSelect(e) {
      this.xl = e;
      this.onSearch();
    },
    onXLSearch(e) {
      //   this.xl = e;
      //   if (this.timer) {
      //     clearTimeout(this.timer);
      //   }
      //   this.timer = setTimeout(() => {
      //     // console.log("防抖...");
      //     this.onSearch();
      //     this.timer = undefined;
      //   }, 200);
      this.onSearch();
    },
    // 商品名称
    onSpmcClear(e) {
      this.xlqz = "";
      this.pagination.current = 1;
      this.onSearch();
      // this.getKfmc(e);
    },
    onSpmcSearch(e) {

      //   this.xlqz = e.target.value;
      //   if (this.timer) {
      //     clearTimeout(this.timer);
      //   }
      //   this.timer = setTimeout(() => {
      //     this.pagination.current = 1;
      //     // console.log("防抖...");
      //     this.onSearch();
      //     this.timer = undefined;
      //   }, 100);
      this.onSearch();
    },
    // 品牌搜索触发
    onSccjcClear(e) {
      this.sccjc = "";
      this.pagination.current = 1;
      this.onSearch();
    },
    onSccjcSearch(e) {
      //   this.sccjc = e.target.value;
      //   if (this.timer) {
      //     clearTimeout(this.timer);
      //   }
      //   this.timer = setTimeout(() => {
      //     // console.log("防抖...");
      //     this.pagination.current = 1;
      //     this.onSearch();
      //     this.timer = undefined;
      //   }, 500);
      this.onSearch();
    },
    // 供货单位搜索触发
    onDwmcSelect(e) {
      //   this.dwmc = e;
      this.onSearch();
    },
    onDwmcSearch(e) {

      //   this.dwmc = e;
      //   if (this.timer) {
      //     clearTimeout(this.timer);
      //   }
      //   this.timer = setTimeout(() => {
      //     // console.log("防抖...");
      //     this.onSearch();
      //     this.timer = undefined;
      //   }, 100);
      this.onSearch();
    },

    // 搜索查询
    onSearch() {
      this.handleChangelist(this.pagination);
    },
    // 分页数据展示
    onPageChange(current) {
      console.log(current);
      this.pagination.current = current;
      this.handleChangelist(this.pagination);
    },
    // 获取品牌筛选数据列表
    getSccjc(e) {
      this.axios
        .post(
          "https://yb.bearing.cn/wxapi/smt_publicDataList.php",
          qs.stringify({
            pageSize: this.pagination.defaultPageSize,
            mc: "品牌",
            keywords: e,
            token: sessionStorage.getItem("smt_token")
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.result) {
            let sccjscsj = [];
            for (var i = 0; i < res.data.result.length; i++) {
              sccjscsj.push(res.data.result[i].mc);
            }
            // 品牌筛选
            this.sccjcData = sccjscsj;
            this.sccjcData = new Set(sccjscsj);
            this.sccjcData = Array.from(this.sccjcData);
            this.sccjcData = this.sccjcData.filter(function(s) {
              return s && s.trim();
            });
          } else {
            this.sccjcData = [];
          }
        });
    },
    // 表格数据
    handleChangelist(pagination, filters) {
          console.log('Various parameters', filters);
        if (filters) {
          if (Object.keys(filters)) {
            this.zdr_val = filters.rwr[0];
          }
        }
      this.pagination.current = pagination.current;
      this.axios
        .post(
          "https://yb.bearing.cn/wxapi/smt_htdcx.php?page=" +
            pagination.current +
            "&gsbm=" +
            this.gsbm +
            "&pageSize=" +
            pagination.defaultPageSize +
            "&type=htdcx",
          qs.stringify({
            token: sessionStorage.getItem("smt_token"),
            djbh: this.htdh,
            xlqz: this.xlqz,
            xl: this.xl,
            sccjc: this.sccjc,
            dwmc: this.dwmc,
            startdate: this.startdate,
            enddate: this.enddate,
            rwrall: this.zdrdata + "",
            rwr: this.zdr_val,
            jgqx: this.jgqx
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.result) {
            this.data = res.data.result;
            this.loading = false;
            this.isShow = true;
            // console.log(this.data)
            // this.totalNum=Number(res.data.totalNum);
            this.pagination.total = Number(res.data.totalNum);
            let htdsj = [];
            let xlsj = [];
            let spmcsj = [];
            let dwmcsj = [];
            for (var i = 0; i < this.data.length; i++) {
              htdsj.push(this.data[i].djbh);
              xlsj.push(this.data[i].xl);
              spmcsj.push(this.data[i].xlqz);
              dwmcsj.push(this.data[i].dwmc);
            }
            // 单位名称筛选
            this.dwmcData = dwmcsj;
            this.dwmcData = new Set(dwmcsj);
            this.dwmcData = Array.from(this.dwmcData);
            this.dwmcData = this.dwmcData.filter(function(s) {
              return s && s.trim();
            });
            // 进货单号筛选
            this.htdData = htdsj;
            this.htdData = new Set(htdsj);
            this.htdData = Array.from(this.htdData);
            this.htdData = this.htdData.filter(function(s) {
              return s && s.trim();
            });
            // 商品名称筛选
            this.spmcData = spmcsj;
            this.spmcData = new Set(spmcsj);
            this.spmcData = Array.from(this.spmcData);
            this.spmcData = this.spmcData.filter(function(s) {
              return s && s.trim();
            });
            // 型号筛选
            this.XlData = xlsj;
            this.XlData = new Set(this.XlData);
            this.XlData = Array.from(this.XlData);
            this.XlData = this.XlData.filter(function(s) {
              return s && s.trim();
            });
          } else {
            this.totalNum = Number(0);
            this.data = [];
            this.XlData = [];
            this.jhdData = [];
            this.spmcData = [];
            this.dwmcData = [];
            this.loading = false;
            this.isShow = false;
          }
        });
    },

    getsamtloginNew() {
      //   if(res.data[ii].gsbm==this.gsbm){
      if (sessionStorage.getItem("gsbm") == this.gsbm) {
        var rwrall = sessionStorage.getItem("xsuser");
        var laststr = rwrall.substr(-1);
        if (laststr == "|") {
          rwrall = rwrall.substr(0, rwrall.length - 1);
        }
        rwrall = rwrall.split("|");
        var new_arr = [];
        for (var i = 0; i < rwrall.length; i++) {
          var items = rwrall[i];
          //判断元素是否存在于new_arr中，如果不存在则插入到new_ar中
          if ($.inArray(items, new_arr) == -1) {
            new_arr.push(items);
          }
        }
        rwrall = new_arr;
        this.rwrall = new_arr;

        console.log(this.rwrall);

        if (rwrall.length > 1) {
          rwrall.unshift("查所有");
        }
        this.zdrdata = rwrall;
        let arr = [];
        for (var i = 0; i < this.zdrdata.length; i++) {
          let obj = {};
          obj.text = this.zdrdata[i];
          obj.value = this.zdrdata[i];
          console.log(obj);
          arr.push(obj);
        }
        for (var i = 0; i < this.columns.length; i++) {
          if (this.columns[i].title == "任务人") {
            this.columns[i].filters = arr;
          }
        }
        this.rwr_val = this.rwrall[0];
        this.zdr_val = rwrall[0];
        // this.handleChangelist(this.pagination);
      }
      // this.axios
      //     .post(
      //     "https://yb.bearing.cn/wxapi/samtloginNew.php?SQDWID=7401&phone=13359211499&fkphone=" +
      //         this.$store.state.bbl_phone +
      //         "&openid=&zctopenid=",
      //     qs.stringify({
      //         token:sessionStorage.getItem('smt_token'),
      //     })
      //     )
      //     .then(res => {
      //     console.log(res);

      //     if (res.data != 0) {
      //         for (var ii = 0; ii < res.data.length; ii++) {
      //             if(res.data[ii].gsbm==this.gsbm){
      //                 var rwrall =res.data[ii].xsuser
      //                 var laststr = rwrall.substr(-1)
      //                 if (laststr == '|') {
      //                     rwrall = rwrall.substr(0, rwrall.length - 1)
      //                 }
      //                 var rwrall = rwrall.split('|');
      //                 this.rwrall=rwrall;
      //                 if (rwrall.length > 1) {
      //                     rwrall.unshift('查所有')
      //                 }
      //                 this.zdrdata=rwrall;
      //                 let arr=[];
      //                 for(var i=0;i<this.zdrdata.length;i++){
      //                     let obj={};
      //                     obj.text=this.zdrdata[i]
      //                     obj.value=this.zdrdata[i];
      //                     console.log(obj)
      //                     arr.push(obj)
      //                 }
      //                  for(var i=0;i<this.columns.length;i++){
      //                     if (this.columns[i].title == "任务人") {
      //                         this.columns[i].filters = arr;
      //                     }
      //                 }
      //                 this.rwr_val=this.rwrall[0];
      //                 this.zdr_val=rwrall[0];
      //                 this.handleChangelist(this.pagination)
      //                 }

      //         }
      //     } else {
      //         console.log("没有权限");
      //     }
      //     });
    },
    // 公司编码选择
    handleGsbmChange(value) {
      console.log(value);
      this.allbm = this.gsdata[value];
      this.onSearch();
    },
    //制单人选择
    handlezdrChange(value, record) {
      console.log(value);
      record.zdr.indexOf(value) === 0;
      console.log(value);
      this.zdr = value;
      console.log(this.zdr);
      // this.onSearch();
    }
  },
  created() {
    // this.getgsbm();
    var da = new Date();
    var year = da.getFullYear();
    var month = da.getMonth() + 1;
    var date = da.getDate();
    this.enddate = [year, month, date].join("-");
    this.gsbm = sessionStorage.getItem("gsbm");
    this.getsamtloginNew();

    this.getSccjc();

    //在页面加载时读取sessionStorage里的状态信息
    // if (sessionStorage.getItem("store") ) {
    //     this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    // }

    // //在页面刷新时将vuex里的信息保存到sessionStorage里
    // window.addEventListener("beforeunload",()=>{
    //     sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    // })
    // 权限价格--限制显示或隐藏---js--开始
    var jgqx = sessionStorage.getItem("arrjgqx");
    console.log(jgqx);
    this.jgqx = jgqx;

    for (var i = 0; i < this.columns.length; i++) {
      //销售价
      if (jgqx.indexOf("htxj") == -1) {
        if (this.columns[i].title == "销售价") {
          this.columns.splice(i, 1);
        }
      }
    }
    // 权限价格--限制显示或隐藏---js--结束
    this.handleChangelist(this.pagination);

  }
};
</script>

<style lang='less' scoped>
.xhhzcx_box {
  .hedlist {
    position: fixed;
    z-index: 999;
    width: 71%;
    left: 10%;
    top: 50px;
    height: 90px;
    line-height: 60px;
    background-color: #f3f7f9;
    .head_box {
      width: 100%;
      display: flex;
      // justify-content: space-around;
      background-color: #fff;
      flex-wrap: wrap;
      .sele {
        // margin-bottom: 15px;
        margin: 0 20px;
        text-align: center;
        position: relative;
        .sele_input {
          width: 170px;
        }
        .ant-select-selection__clear {
          right: 50px;
        }
        .ant-select-auto-complete.ant-select .ant-input {
          height: 32px !important;
        }
        .ant-btn-lg {
          height: 32px !important;
        }
        .search {
          position: absolute;
          top: 8px;
          right: 15px;
          font-size: 18px;
        }
      }
      .rqsele {
        text-align: center;
        margin: 0 20px;
        margin-bottom: 15px;
        .rq_input {
          width: 250px;
        }
      }
      .list_head {
        display: inline-block;
        margin-right: 10px;
      }
      .ssgs_box {
        display: inline-block;
        margin-right: 20px;
      }
    }
  }
  .bcg {
    width: 90%;
    background-color: #f3f7f9 !important;
    position: relative;
    left: 10%;
    min-height: 1000px;
    .xhhzcx_table {
      width: 100%;
      position: relative;
      left: 1%;
      top: 140px;
      width: 98%;
      text-align: left;
      padding: 20px;
      background: #fff;
      // 表头商品名称
      .XLQZ_colme {
        width: 70px;
      }
      .ymInfo_colme {
        width: 128px;
        font-size: 12px;
      }
      .xl_colme {
        width: 150px;
      }
      // 溢出隐藏公共
      .yc {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .spmc_yc {
        width: 70px;
      }
      .ymInfo_yc {
        width: 128px;
      }
      .xl_yc {
        width: 150px;
      }
      // 下拉搜索框公共
      .dropdown_all {
        margin-left: 8px;
        padding: 8px;
        .dropdown_input {
          width: 188px;
          margin-bottom: 8px;
          display: block;
        }
        .dropdown_btn {
          width: 90px;
        }
        .dropdown_btn1 {
          margin-left: 8px;
        }
      }

      .ant-table-thead {
        background-color: #ccc !important;
      }
      .ant-table-tbody {
        background: #fff !important;
      }
    }
    .ant-pagination {
      float: right !important;
      margin-top: 20px;
    }
  }
}
</style>